<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/reset.css">
    <link rel="stylesheet" href="./assets/css/index.css">
    <link rel="stylesheet" href="./assets/css/swiper-bundle.min.css">
</head>

<body>
    <!-- 导航 -->
    <div class="top">
        <div>首页</div>
    </div>
    <!-- 轮播图的优惠券 -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./assets/images/hotel1.jpg" alt=""></div>
            <div class="swiper-slide"> <img src="./assets/images/hotel2.jpg" alt=""></div>
            <div class="swiper-slide"> <img src="./assets/images/hotel3.jpg" alt=""></div>
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="index_content">
        <div class="notice">
            <div class="notice_img">
                <img src="./assets/images/speaker.png" alt="">
            </div>
            <div class="notice_title">
                欢迎注册使用
            </div>
        </div>
        <div class="grid">
            <a href="hotel-info.html">
                <div class="left">
                    <div class="left_img">
                        <img src="./assets/images/hotel1.jpg" alt="">
                    </div>
                </div>
                <div class="right">
                    <div class="text_title">创想第一门店</div>
                    <div class="text_mobile">020-4324923</div>
                    <div class="tips">广东省深圳市福田区华强北街道振兴路341号上步工业区</div>
                </div>
            </a>
        </div>
    </div>

    <div class="index_grid">
        <div class="grid_item">
            <div class="item_img">
                <img src="./assets/images/yuding.png" alt="">
            </div>
            <div class="item_text">一键预定</div>
        </div>
        <div class="grid_item">
            <div class="item_img">
                <img src="./assets/images/yuding.png" alt="">
            </div>
            <div class="item_text">周边商场</div>
        </div>
        <div class="grid_item">
            <div class="item_img">
                <img src="./assets/images/yuding.png" alt="">
            </div>
            <div class="item_text">交通</div>
        </div>
        <div class="grid_item">
            <div class="item_img">
                <img src="./assets/images/yuding.png" alt="">
            </div>
            <div class="item_text">周边餐饮</div>
        </div>
    </div>

    <div class="footer">
        <a class="item active" href="index.html">
            <div class="item_img">
                <img src="./assets/images/order.png" alt="">
            </div>
            <div class="title">首页</div>
        </a>
        <a class="item" href="hotel.html">
            <div class="item_img">
                <img src="./assets/images/order.png" alt="">
            </div>
            <div class="title">预定</div>
        </a>
        <a class="item" href="user.html">
            <div class="item_img">
                <img src="./assets/images/order.png" alt="">
            </div>
            <div class="title">我的</div>
        </a>
    </div>
</body>

</html>
<script src="./assets/js/swiper-bundle.min.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        autoplay: true,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
    });
</script>